<template >
	 <el-container style="height: 100%;width:100%;padding:0 ;position:fixed; ">
	 <el-header style="width:100%;padding:0;">
	  <Navbar style="height:60px"></Navbar>
	</el-header>
	
	<el-main style="background-color:#fff;background-image: url('/src/assets/bk.jpg');background-repeat:no-repeat;background-size: cover;" >
		<div style="  
    border-radius: 20px;
    width: 98%;
    margin: auto;
    padding: 2% 2%;
	box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 12px;
	background :#fff;
    height: 100%;"
	class="tdb"
	>
			<div class="tj" style="background-image: url('/src/assets/ttt.png');">
				<div style="margin-left: -90%;"><h1>试卷总览</h1></div>
				<div style="margin-left: 90%;"> <el-button @click="dialogVisible = true">添加试卷</el-button></div>
			</div>
			<el-divider content-position="left">试卷列表</el-divider>
			<div style="margin-top: 1%;border-radius: 20px ; box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 24px;height: 74%; padding: 2% 1%;">
				 <el-table
				    :data="tableData.datas"
				    style="width: 100%"
				    :row-class-name="tableRowClassName"
					v-loading="loading"
				  >
				  
				    <el-table-column prop="name" label="试卷名称" width="180" />
				    <el-table-column prop="description" label="描述" />
					<el-table-column prop="status" label="状态" >
						
						<template #default="scope">
							<p v-if="scope.row.post_time<=datas.date" style="color: #fff; display: block;
							background-color:#0eff0e ; text-align: center; width: 80px; ">已发布</p>
							<p v-else style="color: #fff; display: block; background-color:#fc9e2a
							; text-align: center; width: 80px; ">未发布</p>
							</template>
					</el-table-column>
					<el-table-column prop="post_time" label="发布日期" width="180" sortable />
					<el-table-column prop="create_time" label="创建日期" width="180" sortable />
					<el-table-column prop="操作" label="操作" >
						<template #default="scope">
						 <el-button  type="primary" @click="catexa(scope.row)">查看</el-button>
						</template>
					</el-table-column>
				  </el-table>
			</div>
		</div>
		
	</el-main>

		
	</el-container>

	
	  <el-dialog
	    v-model="dialogVisible"
	    title="创建试卷"
	    width="30%"
	    :before-close="handleClose"
	  >
	    <form class="register-form" :model="datas.form"  :label-position="right">
	     <el-form-item prop="name" label="试卷名称" >
	        <el-input v-model="datas.form.name" name="name" :prefix-icon="User" :readonly="loading" :clearable="true" placeholder="输入试卷名称"></el-input>

	      </el-form-item>
		  
		  <el-form-item prop="name" label="试卷描述" >
		     <el-input v-model="datas.form.description" name="name" :prefix-icon="User" :readonly="loading" :clearable="true" placeholder="输入试卷描述"></el-input>
		  
		   </el-form-item>
		   
		   <el-form-item prop="name" label="发布时间" >
	        <el-date-picker
	                v-model="datas.form.post_time"
	                type="date"
	                placeholder="发布时间"
	                
	              />
			
	      </el-form-item>
		  </form>
	    <template #footer>
	      <span class="dialog-footer">
	        <el-button @click="dialogVisible = false">Cancel</el-button>
	        <el-button type="primary" @click="addpaper">
	          创建
	        </el-button>
	      </span>
	    </template>
	  </el-dialog>
	  
</template>

<script lang="ts" setup>
	import { ChatLineRound, Male } from '@element-plus/icons-vue'
	import Navbar from '@/components/layouts/navbar.vue';
	import { ref,computed,reactive,onMounted } from 'vue'
	import { useRouter } from 'vue-router'
	import moment from 'moment';
	import {ElMessage} from 'element-plus'
	import axios from 'axios';
	interface paper {
	  id : number
	  date: string
	  name: string
	  description: string
	  status:boolean
	}
	
	const dialogVisible = ref(false)
	
	const addpaper = async () =>{
		const date = new Date(datas.form.post_time)
		const formattedTime = moment(date).format('YYYY-MM-DD')	
		const formdata = new FormData()
		formdata.append("name",datas.form.name)
		formdata.append("description",datas.form.description)
		formdata.append("post_time",formattedTime)
		try{
		const response = await axios.post('/login/v1/examination/paper',formdata,{
					 headers: {
						'TOKEN': localStorage['token']
					  },
				})
		const data = response.data
		if (data.code === 0) {
			ElMessage.success('创建成功')
			
			
		} else{
			ElMessage.error('创建失败')
			
		}
		}catch(e){
			console.log(e)
		}
		finally{
			dialogVisible.value=false
			getexainfo()
		}
	}
	const handleClose = (done: () => void) => {
	  ElMessageBox.confirm('确定关闭吗？')
	    .then(() => {
	      done()
	    })
	    .catch(() => {
	      // catch error
	    })
	}
	const datas = reactive({
		finishnum:0,
		total:0,
		unf:0,
		point:0,
		date:'',
		form:{
			name:'',
			description:'',
			post_time:''
		}
			
	})

	const router = useRouter()
	const size = ref('')
	const tableRowClassName = ({
	  row
	}: {
	  row: paper
	}) => {
	  if (row.status === false) {
	    return 'warning-row'
	  } else if (row.status === true) {
	    return 'success-row'
	  }
	  return ''
	}
	
	const tableData  = ref({
		datas:[
			{	id:1,
			    date: '2016-05-03',
			    name: '测试卷A',
			    description: '测试算法基础',
				status:false
			  },
			  {
				  id:2,
			      date: '2016-05-02',
			      name: '测试卷B',
			      description: '测试算法基础',
			  	status:false
			    },
			  {
				  id:3,
			      date: '2016-05-01',
			      name: '测试卷C',
			      description: '测试算法基础',
				status:false
			    },
			  {
				  id:4,
			      date: '2016-04-29',
			      name: '测试卷D',
			      description: '测试算法基础',
			  	status:false
			    },
		]
	})
	const blockMargin = computed(() => {
	  const marginMap = {
	    large: '32px',
	    default: '28px',
	    small: '24px',
	  }
	  return {
	    marginTop: marginMap[size.value] || marginMap.default,
	  }
	})
	const catexa = async (row:any) =>{
		
		try {
		  // const response = await axios.post('/login/v1/authentication/login',formData)
		  // const data = response.data
		  // if (data.code === 0) {
		  //   const token = data.data.token
		  //   localStorage.setItem('token', token)
		  //   router.push({ name: 'home' })
		  // } else {
		  // }
		} catch (error) {
		  console.error(error)
		}
		router.push({
			name:'questionadd',
			params:{
				id:row.id
			}
		})
	
	}
	const loading = ref(false)
	
	const getexainfo = async () =>{
		const date = new Date()
		const formattedTime = moment(date).format('YYYY-MM-DD')
		datas.date = formattedTime
			try {
				loading.value = true
				const response = await axios.get('/login/v1/examination/paper',{
					 headers: {
						'TOKEN': localStorage['token']
					  },
				})
					  
				const data = response.data
				if (data.code == 0) {
					let fnum = 0
					let ll = data.data.reverse()
					for(let i in ll){
						if (ll[i].status==true){fnum++}
						const date = new Date(ll[i].post_time)
						const formattedTime = moment(date).format('YYYY-MM-DD')
						
						const date2 = new Date(ll[i].create_time)
						const formattedTime2 = moment(date2).format('YYYY-MM-DD')
						
						ll[i].post_time = formattedTime
						ll[i].create_time = formattedTime2
					}
						tableData.value.datas = ll
						datas.total = ll.length
						datas.finishnum = fnum
						
						
					} else {
						
					}
			} catch (error) {
					console.error(error)
				  }finally{
					setTimeout(()=>{
						loading.value = false 
					},1000) 
				  }
		
	}
	
	onMounted (() =>{
		getexainfo()
	})
	
</script>

<style>
	.tdb .el-table--fit {
		height: 100%;
	}
	.el-descriptions {
	  margin-top: 20px;
	}
	.cell-item {
	  width: 50px;
	  display: flex;
	  align-items: center;
	}
	.margin-top {
	  margin-top: 20px;
	}
	.el-table .warning-row {
	  --el-table-tr-bg-color: var(--el-color-warning-light-9);
	}
	.el-table .success-row {
	  --el-table-tr-bg-color: var(--el-color-success-light-9);
	}
	.el-col {
	  text-align: center;
	}
	.tj .el-statistic__head{
		font-size:19px;
		color:black;
	}
	.dialog-footer button:first-child {
	  margin-right: 10px;
	}
</style>